define(['jquery','backbone','lib/utils/bootstrap_forms','bootstrap'],function($,Backbone,BootstrapForm){
    var MultipleEmail=Backbone.View.extend({
    	initialize:function(){
    		this.arrayLabel=this.options.arrayLabel;
    		this.inputsCorreo=new Array();
    		this.countCorreo=0;
    		this.$inputCorreoElectronico=$(document.createElement("input")).addClass("email").attr("id","input_correo_electronico");    		
    		this.$lnkAgregarCorreo=$(document.createElement("a"))
    			.css("cursor","pointer")
    			.html("Agregar correo")
    			.attr("id","lnk_agregar_correo")
    			.tooltip({title:"agregar a la lista"});
    	
       		this.controlesToolbar=[this.$inputCorreoElectronico,this.$lnkAgregarCorreo];
    	    this.$toolBar=BootstrapForm.crearFila();   	    
    	    this.$toolBar.append(BootstrapForm.crearControlGroup(this.controlesToolbar,"Correos electronicos"));
    	    this.$listaCorreos=$(document.createElement("div"));
    	    this.$el.append(this.$toolBar);  
    	    this.$el.append(this.$listaCorreos);
    	},
    	render:function(){
    	   if(this.options.correos!=undefined){
    		   this.llenarListaDeEntradas(this.options.correos);
    	   }
    	},
    	llenarListaDeEntradas:function(correos){
    		var that=this;
    		$.each(correos,function(indice,correoElectronico){
    		    var entradaCorreo=that.crearEntradaCorreo(correoElectronico.correo_electronico, false, correoElectronico.id);
    			that.agregarEntradaCorreoALista(entradaCorreo);
    		});
    	},
    	events:{
    		"click #lnk_agregar_correo":"click_agregarCorreo",
    		"keypress #input_correo_electronico":"key_press_agregarCorreo"
    	},
    	click_agregarCorreo:function(){
     		   this.agregarEntradaCorreoNuevaALista();  		
    	},
    	key_press_agregarCorreo:function(event){
    		 if ( event.which == 13 ) {
    		     event.preventDefault();
    		     this.agregarEntradaCorreoNuevaALista();
    		   }
    	},    	
    	agregarEntradaCorreoNuevaALista:function(){
    		if($("form").validate().element(this.$inputCorreoElectronico)){    			
        		var entradaCorreo=this.crearEntradaCorreo(this.$inputCorreoElectronico.attr("value"),true);    		
        		this.agregarEntradaCorreoALista(entradaCorreo);
        		this.$inputCorreoElectronico.attr("value","");
        		this.$inputCorreoElectronico.focus();
    		}else{
    			this.$inputCorreoElectronico.attr("value","");
    			this.$inputCorreoElectronico.focus();
    		} 
    	},
    	agregarEntradaCorreoALista:function(entradaCorreo){
    		var $fila=BootstrapForm.crearFila();
    		$fila.append(entradaCorreo);	
    		this.$listaCorreos.append($fila);
    	}
    	,
    	crearEntradaCorreo:function(correoElectronico,esNuevo,id){    	
    		var that=this;
    		this.countCorreo=this.countCorreo+1;
    		var prependNombre="nuevo_"+this.countCorreo;
    		if(!esNuevo)
    			prependNombre="guardado_"+id;
    		var name=this.arrayLabel+"["+prependNombre+"]";
    		var $correoInput=$(document.createElement("input"))
    				.attr("name",name)
    					.attr("type",'hidden')
    					.attr("value",correoElectronico);
    		var linkEliminar=this.crearLink("[x]");
    		$(linkEliminar).tooltip({title:"eliminar de la lista"});
    		 var label=$(document.createElement("span")).html(correoElectronico);
    		 var controles=[$correoInput,label,linkEliminar];
    	     var entradaCorreo=BootstrapForm.crearControlGroup(controles);    	     
    	     $(linkEliminar).click(function(){
    	    	$(this).tooltip('hide');
     			$(entradaCorreo).remove();
     			that.$inputCorreoElectronico.focus();
     		});
    		$(entradaCorreo).attr("id",name);
      		return entradaCorreo;
    	},
    	crearLink:function(texto){
    		var linkEliminar=BootstrapForm.crearElemento("a",{
    			"style":"cursor:pointer",    			
    		});
    		$(linkEliminar).html(texto);
    		return linkEliminar;
    	},
    	reset:function(){
    		this.$listaCorreos.html("");
    	}
    });
    return MultipleEmail;
});                     